<template>
    <div>
        <el-page-header @back="goBack" :content="pageTitle"></el-page-header>
        <div class="common_line" style="margin: 10px 0;"></div>
        <el-form ref="addForm" :model="addForm" label-width="auto">
            <el-row v-if="activeName=='join'">
                <el-col :span="24">
                    <el-form-item label="子件:">
                        <el-table :data="goods.zijians_zz" border style="width: 100%">
                            <el-table-column label="序号" align="center" width="60" prop="index" />
                            <el-table-column label="图片" align="center" width="80">
                                <template slot-scope="scope">
                                    <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl" style="width: 55px;height: 55px;" alt="">
                                </template>
                            </el-table-column>
                            <el-table-column label="商品名称" min-width="100" prop="prod_name" align="center" />
                            <el-table-column label="商品编号" align="center" prop="goods_no" />
                            <el-table-column label="成本价" align="center" prop="unit_price_name" />
                            <el-table-column label="数量" align="center" prop="num" />
                            <el-table-column label="单位" width="60" align="center" prop="unit" />
                            <el-table-column label="规格" width="80" align="center" prop="specifications" />
                            <el-table-column label="金额" align="center" prop="total_price_name" />
                            <el-table-column label="库存剩余" min-width="80" align="center" prop="current_inventory_quantity" />
                        </el-table>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="组合件:">
                        <el-table :data="goods.zuhes" border style="width: 100%">
                            <el-table-column label="序号" align="center" width="60" prop="index" />
                            <el-table-column label="图片" align="center" width="80">
                                <template slot-scope="scope">
                                    <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl" style="width: 55px;height: 55px;" alt="">
                                </template>
                            </el-table-column>
                            <el-table-column label="商品名称" min-width="100" prop="prod_name" align="center" />
                            <el-table-column label="商品编号" align="center" prop="goods_no" />
                            <el-table-column label="成本价" align="center" prop="unit_price_name" />
                            <el-table-column label="数量" align="center" prop="num" />
                            <el-table-column label="单位" width="60" align="center" prop="unit" />
                            <el-table-column label="规格" width="80" align="center" prop="specifications" />
                            <el-table-column label="金额" align="center" prop="total_price_name" />
                            <el-table-column label="库存剩余" min-width="80" align="center" prop="current_inventory_quantity" />
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-else>
                <el-col :span="24">
                    <el-form-item label="拆分件:">
                        <el-table :data="goods.chaifens" border style="width: 100%">
                            <el-table-column label="序号" align="center" width="60" prop="index" />
                            <el-table-column label="图片" align="center" width="80">
                                <template slot-scope="scope">
                                    <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl" style="width: 55px;height: 55px;" alt="">
                                </template>
                            </el-table-column>
                            <el-table-column label="商品名称" min-width="100" prop="prod_name" align="center" />
                            <el-table-column label="商品编号" align="center" prop="goods_no" />
                            <el-table-column label="成本价" align="center" prop="unit_price_name" />
                            <el-table-column label="数量" align="center" prop="num" />
                            <el-table-column label="单位" width="60" align="center" prop="unit" />
                            <el-table-column label="规格" width="80" align="center" prop="specifications" />
                            <el-table-column label="金额" align="center" prop="total_price_name" />
                            <el-table-column label="库存剩余" min-width="80" align="center" prop="current_inventory_quantity" />
                        </el-table>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="子件:">
                        <el-table :data="goods.zijians_cf" border style="width: 100%">
                            <el-table-column label="序号" align="center" width="60" prop="index" />
                            <el-table-column label="图片" align="center" width="80">
                                <template slot-scope="scope">
                                    <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl" style="width: 55px;height: 55px;" alt="">
                                </template>
                            </el-table-column>
                            <el-table-column label="商品名称" min-width="100" prop="prod_name" align="center" />
                            <el-table-column label="商品编号" align="center" prop="goods_no" />
                            <el-table-column label="成本价" align="center" prop="unit_price_name" />
                            <el-table-column label="数量" align="center" prop="num" />
                            <el-table-column label="单位" width="60" align="center" prop="unit" />
                            <el-table-column label="规格" width="80" align="center" prop="specifications" />
                            <el-table-column label="金额" align="center" prop="total_price_name" />
                            <el-table-column label="库存剩余" min-width="80" align="center" prop="current_inventory_quantity" />
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item :label="activeName=='join'?'组装费用:':'拆分费用:'">
                        <div>{{ addForm.orders_fee_name }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="parseFloat(addForm.orders_fee)>0">
                    <el-form-item label="结算账户:" >
                        <div>{{ addForm.pay_type_name }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="开单时间:" >
                        <div>{{ addForm.orders_date }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="经办人:">
                        <div>{{ handler_name }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="20">
                    <el-form-item label="备注:">
                        <div>{{  addForm.remark }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row v-if="fileLists&&fileLists.length">
                <div style="font-size: 14px;font-weight: bold;height: 48px;line-height: 48px;">附件</div>
                <div class="file_list">
                    <div v-for="item in fileLists" :key="'file_'+item.id" class="file" @click="downloadFile(item)">
                        {{ item.file_name }}
                    </div>
                </div>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { infoJoin, infoSplit } from "@/api/joinsplit";

export default {
    name: 'joinSplitQuery',
    data() {
        return {
            goods: {
                zijians_zz: [],
                zuhes: [],
                chaifens: [],
                zijians_cf: []
            },
            activeName: 'join',
            orderId: '',
            pageTitle: '',
            addForm: {
                corp: '',
                orders_fee: 0,
                orders_date: '',
                remark: '',
                handler_user: '',
                pay_type: '',
                goods: []
            },
            handler_name: '',
            fileLists: [],
            payTypes: [
                {label: '微信', value: 2},
				{label: '支付宝', value: 5},
				{label: '现金', value: 1},
				{label: '银行转账', value: 3},
				{label: '其他', value: 4}
            ]
        }
    },
    props: {
        corpId: {
            type: Number
        },
        editId: {
            type: Number
        },
        type: {
            type: String
        }
    },
    watch: {
        '$route.query.bussId4': {
            immediate: true, // 首次加载时触发
            handler(newId) {
                if (newId) {
                    this.addForm.corp = this.$store.state.corpId
                    this.activeName = this.$route.query.type
                    this.orderId = newId
                    this.pageTitle = this.activeName=='join'?'查看组装单':'查看拆分单'
                    this.getInfo()
                }
            }
        }
    },
    mounted() {
        this.addForm.corp = this.corpId
        if (this.editId){
            this.orderId = this.editId
            this.pageTitle = this.type=='join'?'查看组装单':'查看拆分单'
            this.activeName = this.type
            this.getInfo()
        }
    },
    methods: {
        goBack() {
            this.$emit('hidden', '')
        },
        downloadFile(item) {
            location.href = item.url_show
        },
        getInfo() {
            let temp = this.activeName=='join' ? infoJoin(this.orderId, {corp: this.addForm.corp}) : infoSplit(this.orderId, {corp: this.addForm.corp})
            temp.then(res => {
                this.addForm = res.data.data
                this.handler_name = this.addForm.handler_user_detail?this.addForm.handler_user_detail.username:''
                if (this.addForm.payment_record.length){
                    this.addForm.pay_type_name = this.handlePayTypeName(this.addForm.payment_record[0].pay_type)
                }else{
                    this.addForm.pay_type_name = ''
                }
                this.addForm.orders_fee_name = '￥'+this.addForm.orders_fee
                this.addForm.orders_goods_detail.forEach(item => {
                    item.imgUrl = item.goods_details.image?item.goods_details.image.url:'https://anhuiyaoying.com/icon/default.png'
                    item.prod_name = item.goods_details.name
                    item.goods_no = item.goods_details.goods_no
                    item.unit_price_name = '￥'+item.unit_price
                    item.num = parseFloat(item.num)
                    item.total_price_name = '￥'+item.total_price
                    item.unit = item.goods_details.unit
                    item.specifications = item.goods_details.specifications
                    item.current_inventory_quantity = item.goods_details.current_inventory_quantity
                    if (this.activeName == 'join'){
                        if (item.num_type === 1){  //入库,组合件
                            item.index = this.goods.zuhes.length+1
                            this.goods.zuhes.push(item)
                        }else{
                            item.index = this.goods.zijians_zz.length+1
                            this.goods.zijians_zz.push(item)
                        }
                    }else{
                        if (item.num_type === 1){  //入库,子件
                            item.index = this.goods.zijians_cf.length+1
                            this.goods.zijians_cf.push(item)
                        }else{
                            item.index = this.goods.chaifens.length+1
                            this.goods.chaifens.push(item)
                        }
                    }
                })
                
                // 附件
                this.fileLists = this.addForm.file_list_show || []
            })
        },
        handlePayTypeName(val) {
            let name = ''
            this.payTypes.forEach(item => {
                if (val === item.value) {
                    name = item.label
                }
            })
            return name
        },
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';
    .inner_input {
        width: 100px;
        padding: 8px 5px;
    }
    .set_user_done {
        margin-left: 10px;
        font-size: 14px;
        &:hover {
            color: @blue;
            cursor: pointer;
        }
    }
    .set_user_none {
        margin-left: 10px;
        font-size: 14px;
        color: @blue;
        &:hover {
            cursor: pointer;
        }
    }
    .file_list {
        font-size: 13px;
        padding-left: 40px;
        .file {
            cursor: pointer;
            padding-bottom: 10px;
            &:hover {
                color: @blue;
            }
        }
    }
    .partner_view {
        .lists {
            height: 300px;
            overflow-y: auto;
            .cell {
                display: flex;
                border-bottom: 1px solid #eee;
                height: 40px;
                align-items: center;
                justify-content: space-between;
                .icon {
                    color: @blue;
                    font-size: 18px;
                }
            }
        }
    }
</style>